import React, {Component} from 'react';
// 无限滚动 // 进度条 // 下拉刷新
import {InfiniteScroll,PullToRefresh,Toast} from "antd-mobile";
import TabBar from "../../../Components/TabBar";
import NavBar from "../../../Components/NavBar";
import SingerNav from "./components/SingerNav";
import {sleep} from "antd-mobile/es/utils/sleep";
import './index.css'

class Singer extends Component {
    state = {
        singer_list:[
            {name:'华语男',cat:1001},
            {name:'华语女',cat:1002},
            {name:'华语组合',cat:1003},
            {name:'欧美男',cat:2001},
            {name:'欧美女',cat:2002},
            {name:'欧美组合',cat:2003},
            {name:'日本男',cat:6001},
            {name:'日本女',cat:6002},
            {name:'日本组合',cat:6003},
            {name:'韩国男',cat:7001},
            {name:'韩国女',cat:7002},
            {name:'韩国组合',cat:7003},
            {name:'其他男歌手',cat:4001},
            {name:'其他女歌手',cat:4002},
            {name:'其他组合',cat:4003},
        ],
        letter:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
        activeCate: 0,
        activeLetter: 0,
        arr: null,
        // 循环列表
        ListArr:[],
        offset: 0,
        hasMore: false,
    };
    click = (index)=>{
        const {singer_list:arr} = this.state;
        arr.forEach((v,i)=>v.act = i-0 ===index-0 ? true: false)
        this.setState({singer_list:arr,activeCate:index,ListArr:[],hasMore: false},()=>{
            this.getData()
        })
    };
    lc = (index)=>{
        this.setState({activeLetter:index,ListArr:[],hasMore: false},()=>{
            this.getData()
        })
    };
    getData = () =>{
        const {activeCate,activeLetter,singer_list,letter,ListArr} = this.state;
        this.$api.getSinger(singer_list[activeCate].cat,letter[activeLetter],ListArr.length).then(data=>{
            if(data.more){
                let {ListArr} = this.state;
                ListArr = [...ListArr,...data.artists];
                this.setState({ListArr:ListArr,hasMore:true});
            }else{
                this.setState({hasMore:false});
            }
        })
    };
    LoadMore = async () =>{
        const {activeCate,activeLetter,singer_list,letter,ListArr} = this.state;
        const data = await this.$api.getSinger(singer_list[activeCate].cat,letter[activeLetter],ListArr.length);
        if(data.more){
            let {ListArr} = this.state;
            ListArr = [...ListArr,...data.artists];
            this.setState({ListArr:ListArr,hasMore:true});
        }else{
            this.setState({hasMore:false});
        }
    }
    resetArr = () =>{
        let {singer_list} = this.state;
        singer_list = singer_list.map((v,i)=>{
            v.act = i===0? true: false
            return v;
        });
        this.setState({singer_list})
    };
    refresh = async () =>{
        await sleep(1000)
        Toast.show({
            icon: 'success',
            content: "刷新成功"
        })
    };
    componentDidMount() {
        this.resetArr();
        this.getData();
    }
    jump = (e) =>{
        const {id} = e.target.dataset;
        this.props.history.push({pathname:'/singerAlbum',state:{id}})
    }
    render() {
        let {singer_list,letter,activeLetter,ListArr,hasMore} = this.state;
        return (
            <div className={'singer-page'}>
                <NavBar>
                    <div className={'title'}>歌手</div>
                </NavBar>
                <div className="nav">
                    <SingerNav arr={singer_list} activeletter={activeLetter} letters={letter} click={this.click} lc={this.lc}/>
                </div>
                <main>
                    <PullToRefresh onRefresh={this.refresh}>
                        <div className="box" onClick={this.jump}>
                            {ListArr.length>0 ? ListArr.map((v,i)=><div className={'item'} key={i} data-id={v.id}>
                                <div className={'img'}>
                                    <img src={v.img1v1Url}  data-id={v.id} data-id={v.id}/>
                                </div>
                                <div className={'title'} data-id={v.id}>{v.name}</div>
                            </div>) : null}
                        </div>
                        <InfiniteScroll loadMore={this.LoadMore} hasMore={hasMore}>
                            {hasMore? <div>loading..</div>: <div>没了</div>}
                        </InfiniteScroll>
                    </PullToRefresh>
                </main>
                <TabBar></TabBar>
            </div>
        );
    }
}

export default Singer;